<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet"
	href="${contextPath}/static/statistics/css/mui.min.css">
<link rel="stylesheet"
	href="${contextPath}/static/statistics/css/app.css" />
<link rel="stylesheet"
	href="${contextPath}/static/statistics/css/mui.picker.min.css" />
<link rel="stylesheet"
	href="${contextPath}/static/statistics/css/mui.dtpicker.css" />
<script type="text/javascript" charset="utf-8">
	
</script>
<style type="text/css">
.chart {
	height: 200px;
	margin: 0px;
	padding: 0px;
}

h5 {
	margin-top: 30px;
	font-weight: bold;
}

h5:first-child {
	margin-top: 15px;
}

.backgroundpic {
	width: 100%;
	height: 640px;
}

.backgroundpic img {
	width: 15%;
	margin-top: 20px;
	float: left;
	max-width: 50px;
}

.top h2 {
	padding-top: 25px;
	padding-left: 70px;
	color: #FFFFFF;
}

.top {
	margin: 0 7%;
	width: 86%;
	border-top: solid 1px gray;
	height: 100px;
}

.top1 {
	margin: 0 7%;
	width: 86%;
	border-top: solid 1px gray;
	height: 170px;
}

span {
	color: #FFFFFF;
	line-height: 40px;
	font-size: 16px;
}

p {
	line-height: 45px;
	font-size: 30px;
}

.second {
	color: #fff
}

.body-pic {
	width: 100%;
	height: 100%;
	background: url(${contextPath}/static/image/bk.png) no-repeat;
}

tbody td {
	color: #FFDC72;
}

.mui-btn {
	font-size: 16px;
	padding: 5px;
	margin: 3px;
}
</style>
</head>
<body class="body-pic">
	<div class="backgroundpic">
		<div class="top">
			<img src="${contextPath}/static/image/square.png" />
			<h2>商户信息查询</h2>
		</div>
		<div class="top">
			<span>零售户名称</span>
			<p style="color: #7DFFA8;" id="th2">获取客户信息中..</p>
		</div>
		<div class="top">
			<div style="width: 50%; float: left;">
				<span>客户档位信息</span>
				<p style="color: #FFDC72;" id="th3">--</p>
			</div>
			<div style="width: 50%; float: left;">
				<span>客户终端类型</span>
				<p style="color: #FFFFFF;" id="th4">--</p>
			</div>
		</div>
		<div class="top">
			<span>客户经理名称</span>
			<p style="color: #92C6FF; font-size: 18px;" id="th1"></p>
		</div>
		<div class="top" style="height:150px">
			<button id='demo6' data-options='{"type":"month"}'
				class="btn mui-btn mui-btn-block">选择月份 ...</button>
			<div style="width: 25%; float: left;">
				<span>购进量(条)</span>
				<p style="color: #F19D38;" id="buy"></p>
			</div>
			<div style="width: 50%; float: left;">
				<span>购进金额 (元)</span>
				<p style="color: #F19D38;" id="sale"></p>
			</div>
			<div style="width: 25%; float: left;">
				<span>单条值(元)</span>
				<p style="color: #F19D38;" id="eve"></p>
			</div>

		</div>
		<div class="top">
			<span>品牌宽度</span>
			<p style="color: #92C6FF;" id="totalCiga"></p>
		</div>
		<div class="top1">
			<span>单月购进量前五</span>
			<table>
				<thead>
					<tr>
						<td width="120px" class="second">品牌名称</td>
						<td width="100px" class="second">购进量</td>
						<td width="100px" class="second">占比</td>
					</tr>
				</thead>
				<tbody id="bodyInfo">

				</tbody>
			</table>
		</div>

	</div>
	<script src="${contextPath}/static/statistics/js/mui.min.js"></script>
	<script src="${contextPath}/static/statistics/js/jquery.js"></script>
	<script src="${contextPath}/static/statistics/js/mui.picker.min.js"></script>
	<script type="text/javascript">
		var cust_code = "${cust_code}";
	  (function($) {
          	var btn = document.getElementById("demo6");
          	var myDate  = new Date();
          	var dateTime = myDate.getFullYear()+'-'+(myDate.getMonth()+1);
          	btn.innerText=dateTime
			$.ajax({
				type : "post",
				url : "${contextPath}/Honest/getCustInfo",
				async : false,
				data : {
					"cust_code" : cust_code,
				},
				success : function(data) {
					var a = data.data[0];
					$("#th1").html(a.SLSMAN_NAME);
					$("#th2").html(a.CUST_NAME);
					$("#th3").html(a.CUST_ORDER_LEVEL==null?"--":a.CUST_ORDER_LEVEL);
					$("#th4").html(a.RTL_TYPE==null?"--":a.RTL_TYPE);
				},
				error : function() {
					console.log('fail')
				}
			});
		}) (jQuery);
		(function($) {
			$.init();
			var btn = document.getElementById("demo6");
			btn.addEventListener("tap",
					function() {
						var _self = this;
						if (_self.picker) {
							_self.picker.show(function(rs) {
								var a = rs.text;
								var b = a.replace("-", "");
								_self.picker.dispose();
								_self.picker = null;
								getData(b);
							});
						} else {
							var optionsJson = this.getAttribute('data-options')
									|| '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								var a = rs.text;
								btn.innerHTML=a
								var b = a.replace("-", "");
								_self.picker.dispose();
								_self.picker = null;
								getData(b);
							});
						}
					}, false);
		})(mui);
		
		$(document).ready(function() {
			var time;
			getData(time);
		})
		var getData = function(time){
			$("#buy").html("");
			$("#sale").html("");
			$("#eve").html("");
			$("#bodyInfo").html("");
			$.ajax({
				type : "post",
				url : "${contextPath}/Honest/salesSold",
				async : false,
				data : {
					"cust_code" : cust_code,
					"time":time
				},
				success : function(data) {
					salesandsold(data)
				},
				error : function() {
				}
			});
			$ .ajax({
				type : "post",
				url : "${contextPath}/Honest/checkWidth",
				async : false,
				data : {
					"cust_code" : cust_code,
					"time":time
				},
				success : function(data) {
					checkWidth(data)
				},
				error : function() {
				}
			}); 
			$.ajax({
				type : "post",
				url : "${contextPath}/Honest/selectTop5",
				async : false,
				data : {
					"cust_code" : cust_code,
					"time":time
				},
				success : function(data) {
					selecttop5(data)
				},
				error : function() {
				}
			});
		}
		
		var buy
		var salesandsold = function(data) {
			var a = data.data[0];
			buy = a.DINGHUO;
			var totalCiga = a.XIAOLIANG
			$("#buy").html(buy);
			$("#sale").html(a.XIAOLIANG);
			if (totalCiga!="0") {
				$("#eve").html(parseInt(totalCiga /buy));
			} else {
				$("#eve").html("0");
			}
		}

		var checkWidth = function(data) {
			var a = data.data[0];
			$("#totalCiga").html(a.ZONGSHU);
		}

		var selecttop5 = function(data) {
			var a = data.data;
			var html = "";
			$.each(a, function(idx, obj) {
				html += "<tr>";
				html += "<td>" + obj.PRODUCT_NAME + "</td>";
				html += "<td>" + obj.REAL_QUANTITY + "</td>";
				html += "<td>"
						+ parseInt(parseInt(obj.REAL_QUANTITY) * 100
								/ parseInt(buy)) + "%" + "</td>";
				html += "</tr>";
			});
			$("#bodyInfo").html(html);
		}
	</script>
</body>
</html>